<template>
  <div class="sszd">
    <Row class="margin-top-10">
      <Card>
        <p slot="title"
           class="card-title">
          <Row class=""
               :gutter="10">
            <Col :md="4"
                 :lg="2">
            <div style="margin-top: 5px;">
              <Icon type="ios-pulse"></Icon>
              {{this.$route.meta.title}}
            </div>
            </Col>
            <Col :md="20"
                 :lg="22">

            </Col>
          </Row>
        </p>
        <div class="line-chart-con">
          <Table border
                 stripe
                 :columns="title"
                 :data="data"></Table>
          <Row class="margin-top-10"
               :gutter="10">
            <Col :md="12"
                 :lg="12">
            <Page :total="page.count"
                  :current.sync="page.current"
                  class-name="page-margin-top"
                  show-elevator
                  @on-change="pageTurn"
                  show-sizer
                  @on-page-size-change="listDisplayQuantity"></Page>
            </Col>
          </Row>
        </div>
      </Card>
    </Row>
    <Modal v-model="zfmodal"
           width="360"
           :mask-closable="false">
      <p slot="header"
         style="color:#57a3f3;text-align:center">
        <Icon type="ios-clipboard" />
        <span>请使用支付宝扫码支付</span>
      </p>
      <div style="text-align:center">
        <Alert type="warning">提醒：扫码后请将单号填写到备注后确认支付,如果操作失误请联系客服</Alert>
        <p style="font-size: 18px;margin-bottom: 9px;">单号：
          <span style="color: #ff9900;">{{dindan.order_id}}</span>
        </p>
        <qrcode-vue :value="AliPay.pay_r_code_url"
                    size="200"
                    level="H"></qrcode-vue>
      </div>
      <div slot="footer">
        <Button type="info"
                size="large"
                long
                @click="wczf">完成支付</Button>
      </div>
    </Modal>
  </div>
</template>
<style lang="less">
.order {
  font-size: 16px;
  margin-left: 5px;
}
.sszd {
  .ivu-form-item {
    margin-bottom: 0px;
  }
  .ivu-card-head-inner,
  .ivu-card-head p {
    height: auto;
    overflow: inherit;
  }
  .page-margin-top {
    margin-top: 10px;
  }
  .ivu-modal-wrap {
    display: flex;
    align-items: center;
    justify-content: center;

    .ivu-modal {
      top: 0;
    }
  }
}
</style>
<script>
import QrcodeVue from 'qrcode.vue'

export default {
  components: {
    QrcodeVue
  },
  data () {
    return {
      dindan: {},
      zfmodal: false,
      AliPay: {
        pay_r_code_url: '',
        secret: '',
        sid: ''
      },
      page: {
        count: 0,
        current: 1,
        limit: '0,10'
      },
      data: [],
      title: [
        {
          title: '订单号',
          key: 'order_id',
          align: 'center'
        },
        {
          title: '金额',
          key: 'money',
          align: 'center'
        },
        {
          title: '下单日期',
          key: 'created',
          align: 'center'
        },
        {
          title: '最后操作时间',
          key: 'updated',
          align: 'center'
        },
        {
          title: '状态',
          key: '',
          align: 'center',
          render: (h, params) => {
            switch (params.row.status) {
              case -1:
                return h('div', [
                  h('Tag', {
                    props: {
                      size: 'small',
                      disabled: true,
                      color: 'blue'
                    }
                  }, '已下单')
                ])
              case 1:
                return h('div', [
                  h('Tag', {
                    props: {
                      size: 'small',
                      disabled: true,
                      color: 'green'
                    }
                  }, '已充值')
                ])
              case 2:
                return h('div', [
                  h('Tag', {
                    props: {
                      size: 'small',
                      disabled: true,
                      color: 'yellow'
                    }
                  }, '已拒绝')
                ])
              case 3:
                return h('div', [
                  h('Tag', {
                    props: {
                      size: 'small',
                      disabled: true,
                      color: 'red'
                    }
                  }, '')
                ])
            }
          }
        },
        {
          title: '操作',
          key: '',
          width: 150,
          align: 'center',
          render: (h, params) => {
            if (params.row.status === -1) {
              return h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  disabled: false
                },
                on: {
                  click: () => {
                    this.dindan = params.row
                    this.$api.repeater(this, 'getAliPay').then(res2 => {
                      this.zfmodal = true
                      if (res2.code === 1) {
                        this.AliPay = res2.msg
                      } else {
                        this.$Notice.error({
                          title: res2.msg
                        })
                      }
                    })
                  }
                }
              }, '立即付款')
            } else {
              return h('div', '')
            }
          }
        }
      ]
    }
  },
  computed: {

  },
  watch: {

  },
  methods: {
    init () {
      this.getBuyList()
    },
    order (key) {
      this.order_param = this.order_param === key ? 'id' : key
      this.getBuyList()
    },
    wczf () {
      this.zfmodal = false
    },
    // 翻页
    pageTurn (ev) {
      let limit = this.page.limit.split(',')
      this.page.limit = `${(ev - 1) * limit[1]},${limit[1]}`
      this.getBuyList()
    },
    // 列表显示行数
    listDisplayQuantity (ev) {
      this.page.limit = `0,${ev}`
      this.getBuyList()
    },
    // 回到第一页
    startPage () {
      this.page.current = 1
      let limit = this.page.limit.split(',')
      this.page.limit = `0,${limit[1]}`
    },
    setTime (t) {
      this.formItem.time = t
    },
    getNowFormatDate () {
      let time = (data) => {
        let date = new Date()
        if (data) date.setDate(date.getDate() + data)
        let Y = date.getFullYear()
        let M = date.getMonth() + 1
        let D = date.getDate()
        let h = date.getHours()
        let m = date.getMinutes()
        let s = date.getSeconds()
        if (M >= 1 && M <= 9) M = '0' + M
        if (D >= 0 && D <= 9) D = '0' + D
        if (h >= 0 && h <= 9) h = '0' + h
        if (m >= 0 && m <= 9) m = '0' + m
        if (s >= 0 && s <= 9) s = '0' + s
        return `${Y}-${M}-${D}`
      }
      return [time(-30), time(1)]
    },
    getBuyList () {
      // console.log(this.queryData)
      let data = {
        limit: this.page.limit,
        order_param: 'id',
        where_param: '',
        time_column_name: 'updated',
        time_between: ''
      }
      this.$api.repeater(this, 'getBuyList', data).then(res => {
        if (res.code === 1) {
          this.data = res.msg.records
        }
      })
    }
  },
  mounted () {
    this.init()
  }
}
</script>
